<template>
  <!-- <div id="mask"></div> -->
  <div class="app-main">
    <header>
      <img src="../assets/bell.png" alt="">
      <router-link to="/Notice" class="notice">{{noticeTT}}</router-link>
    </header>
    <img class="homepage-background" src="../assets/home.jpg" alt="">
    <img class="homepage-background" v-lazy={src:bgimg} alt="">
    <router-link to="/Daily" class="bubble-daily">签到</router-link>
    <router-link to="/IDcard" class="bubble-card">学生证</router-link>
    <router-link to="/Article" class="Article"></router-link>
    <router-link to="/Video" class="Video"></router-link>
    <!-- <router-link to="/BBS" class="BBS"></router-link> -->
    <!-- <router-link to="/Test" class="Test"></router-link> -->
  </div>
</template>

<script>
  import {
    Group,
    Cell,
    Marquee,
    MarqueeItem,
    Divider
  } from "vux";
  import {
    getNotice_Axios,getToken_Axios
  } from './axios/api';

  export default {
    components: {
        Marquee,
        MarqueeItem,
        Group,
        Cell,
        Divider
    },

    methods: {
      //获取公告
      getNotice() {
        getNotice_Axios().then(res => {
          this.noticeTT = res.data.data.title;
        })
      }
    },
    data() {
        return {
            bgimg: "",
            noticeTT: "",
            id: "",
            openid: "",
            access_token: ""
        };
    },
    mounted() {
        this.getNotice();
        // sessionStorage.setItem('id','26');
        let url = window.location.href;
        console.log("url", url);
        // 截取code.
        let code = url.split("code=")[1].split("&state=")[0];
        console.log("code", code);
        this.$http
            .get("http://122.152.216.183:8092/home/login/accesstoken", {
                params: {
                    code: code
                }
            })
            .then(response => {
                console.log(response.data);
                this.id = response.data.data.id;
                this.openid = response.data.data.openid;
                this.access_token = response.data.data.webAccessToken;
                sessionStorage.setItem("openid", this.openid);
                sessionStorage.setItem("id", this.id);
                sessionStorage.setItem("access_token", this.access_token);
            });
    }
};
</script>

<style lang="scss" scoped>
.align-middle {
    text-align: center;
}
.app-main {
    position: relative;
    height: 100vh;
    overflow-y: hidden;
    .homepage-background {
        width: auto;
        height: 100%;
        text-align: center;
    }
    header {
        position: fixed;
        top: 0;
        width: 100%;
        display: flex;
        align-items: center;
        height: 3rem;
        background-color: #e6a23c;
        .notice {
            font-size: 1.4rem;
            text-align: left;
        }
        img {
            width: 1.8rem;
            height: 1.8rem;
            margin: 0 2rem;
        }
    }
}
.Article {
    position: absolute;
    left: 35vw;
    bottom: 5vh;
    width: 75vw;
    height: 40vh;
    z-index: 100;
}
.Video {
    position: absolute;
    left: 95vw;
    top: 4rem;
    width: 85vw;
    height: 45vh;
}

.bubble-daily {
    position: fixed;
    top: 6.5rem;
    right: 1.5rem;
    width: 6.4rem;
    height: 3.7rem;
    font-size: 1.8rem;
    line-height: 3.7rem;
    border: none;
    border-radius: 5px;
    background-image: url("../assets/bubble-daily.png");
    background-size: 100%;
    color: #fff;
    z-index: 1000;
}
.bubble-card {
    @extend .bubble-daily;
    top: 12.5rem;
    background-image: url("../assets/bubble-card.png");
}
</style>
